<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>员工详情</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="$router.go(-1)"
          >
            返回
          </el-button>
        </div>
      </template>

      <el-form
        ref="form"
        :model="employeeInfo"
        label-width="120px"
        :disabled="true"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="employeeInfo.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工号">
              <el-input v-model="employeeInfo.employeeNo" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="部门">
              <el-input v-model="employeeInfo.department" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位">
              <el-input v-model="employeeInfo.position" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input v-model="employeeInfo.phone" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input v-model="employeeInfo.email" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="入职日期">
              <el-input v-model="employeeInfo.entryDate" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-tag :type="employeeInfo.status === 1 ? 'success' : 'info'">
                {{ employeeInfo.status === 1 ? '在职' : '离职' }}
              </el-tag>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 培训记录 -->
      <div class="training-records">
        <div class="section-title">培训记录</div>
        <el-table
          v-loading="trainingLoading"
          :data="trainingRecords"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="courseName"
            label="培训课程"
            align="center"
          />
          <el-table-column
            prop="startTime"
            label="开始时间"
            align="center"
            width="180"
          />
          <el-table-column
            prop="endTime"
            label="结束时间"
            align="center"
            width="180"
          />
          <el-table-column
            prop="score"
            label="考核得分"
            align="center"
            width="100"
          />
          <el-table-column
            prop="status"
            label="状态"
            align="center"
            width="100"
          >
            <template #default="{row}">
              <el-tag :type="row.status === 1 ? 'success' : 'info'">
                {{ row.status === 1 ? '已完成' : '进行中' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getEmployeeDetail, getEmployeeTrainingRecords } from '@/api/employee'

export default defineComponent({
  name: 'EmployeeDetail',
  setup() {
    const route = useRoute()
    const employeeInfo = ref({})
    const trainingRecords = ref([])
    const trainingLoading = ref(false)

    const getDetail = async () => {
      try {
        const { data } = await getEmployeeDetail(route.params.id)
        employeeInfo.value = data
      } catch (error) {
        console.error('获取员工详情失败:', error)
      }
    }

    const getTrainingRecords = async () => {
      trainingLoading.value = true
      try {
        const { data } = await getEmployeeTrainingRecords(route.params.id)
        trainingRecords.value = data
      } catch (error) {
        console.error('获取培训记录失败:', error)
      } finally {
        trainingLoading.value = false
      }
    }

    onMounted(() => {
      getDetail()
      getTrainingRecords()
    })

    return {
      employeeInfo,
      trainingRecords,
      trainingLoading
    }
  }
})
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0;
  padding-left: 10px;
  border-left: 3px solid #409EFF;
}

.training-records {
  margin-top: 30px;
}
</style>